<template>
    <div class="juziItem">
        <nuxt-link :to="`/category/${item.sentence.categoryId}`">
            <span class='category'>
                {{item.sentence.category}}
            </span>
        </nuxt-link>
        <div class="jzContent">
            <p><nuxt-link :to="`/sentence/${item.sentence.id}`">{{item.sentence.content}}</nuxt-link></p>
        </div>
        <div class="tags">
            <nuxt-link v-for="(tag,tagKey) in item.sentence.tag" :key="tagKey" :to="`/search?keyword=${tag}&type=tag`">
                <span>{{tag}}</span>
            </nuxt-link>
        </div>
    </div>
</template>

<script>
import { mapMutations, mapGetters, mapActions } from "vuex"
export default {
    props: ['item'],
    data() {
        return {
        }
    },
    computed: {
        ...mapGetters('sentence', ['sentenceThumbsUp', 'collectList'])
    },
    methods: {
        ...mapActions('sentence', ['thumbsUp', 'collect']),
        async handThumbsUp() {
            let sentenceId = this.item.id;
            let status = 1;
            if (this.sentenceThumbsUp.includes(sentenceId)) {
                status = 0;
            }
            let result = await this.thumbsUp({
                typeId: sentenceId,
                type: 1,
                status: status
            });
            if (result.code !== 0) {
                this.$notify({
                    message: result.msg,
                    type: 'warning',
                    offset: 50,
                    duration: 3000
                });
                return;
            }
            console.log(result);
        },
        async handCollect() {
            let sentenceId = this.item.id;
            let status = 1;
            if (this.collectList.includes(sentenceId)) {
                status = 0;
            }
            let result = await this.collect({
                sentenceId,
                status
            });
            if (result.code !== 0) {
                this.$notify({
                    message: result.msg,
                    type: 'warning',
                    offset: 50,
                    duration: 3000
                });
                return;
            }
            console.log(result);
        }
    }
}
</script>